<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <!-- <div class="box1">
      <div class="box2"></div>
    </div> -->

    <ul>
      <li>333</li>
      <p>222</p>
      <span>111</span>
    </ul>

    <script>
      //   var box1Ele = document.querySelector(".box1");
      //   var box2Ele = document.querySelector(".box2");
      //   box1Ele.onclick = function (e) {
      //     box1Ele.style.background = "pink";
      //   };
      //   box2Ele.onclick = function (e) {
      //     box2Ele.style.background = "black";
      //     e.stopPropagation();
      //   };
      // 二、触发目标e.target 如果是ie8或者以下；e.srcElement
      //    var ulEle =  document.querySelector("ul");
      //    ulEle.addEventListener("click",function(e){
      //         console.log(e.target);
      //    })

      var ulEle = document.querySelector("ul");
      //    ulEle.attachEvent("onclick",function(e){
      //        var e = e || window.event;
      //         // console.log(e.target);
      //         // console.log(e.srcElement);

      //    })
      bindEvent(ulEle, "click", function (event) {
        var e = event || window.event;
        var target = e.target || e.srcElement;
        console.log(target);
      });

      function bindEvent(ele, eventName, fn) {
        // 判断浏览器是否支持 addEventListener方法
        if (window.addEventListener) {
          // 有addEventListener 是chrome浏览器
          ele.addEventListener(eventName, fn);
        } else {
          // ie8或者以下；
          ele.attachEvent("on" + eventName, fn);
        }
      }

      // 一.阻止事件冒泡 1.e.stopPropagation() 2.e.cancelBubble = true;
      // 二、目标元素： e.target || e.srcElement
    </script>
  </body>
</html>
